<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div class="cont flex px-6 items-center rounded-md">
    <i class="iconfont text-6xl mr-6" :class="icon"></i>
    <input
      class="border-0 flex-1 text-4xl"
      type="text"
      :placeholder="holder"
      @input="handleUpdate"
      :value="modelValue"
    />
  </div>
</template>

<script setup lang="ts">
interface PropsType {
  icon: string;
  holder: string;
  modelValue?: string; //v-model传过来的值
}
//默认值
withDefaults(defineProps<PropsType>(), {
  icon: "icon-a-001_sousuo",
  holder: "请输入您心仪的岗位",
});
interface EmitsType {
  (e: "update:modelValue", arg: string): void;
}
const emits = defineEmits<EmitsType>();
const handleUpdate = (ev: Event) => {
  if (ev.target) {
    let v = (ev.target as HTMLInputElement).value;
    emits("update:modelValue", v); //将输入框的value，实时传给v-model
  }
};
</script>

<style lang="scss" scoped>
.cont {
  height: 9.6rem;
  border: 1px solid rgba(238, 238, 238, 1);
}
</style>
